<template>
  <div class="bottom-tab">
    <div class="tab-item" @click="switchTo('/Home')">
      <img
        :src="'/Home' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal"
        alt="首页"
      >

      <span :class="{on: '/Page' === $route.path}">首页</span>
    </div>
    <div class="tab-item" @click="switchTo('/product')">
      <img
        :src="'/product' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal"
        alt="产品"
      >
      <span :class="{on: '/product' === $route.path}">产品</span>
    </div>
    <div class="tab-item" @click="switchTo('/putGold')">
      <img
        :src="'/putGold' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal"
        alt="入金"
      >
      <span :class="{on: '/putGold' === $route.path}">入金</span>
    </div>
    <div class="tab-item" @click="switchTo('/mine')">
      <img
        :src="'/mine' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal"
        alt="我的"
      >
      <span :class="{on: '/mine' === $route.path}">我的</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabBarImgArr: [
        //图片切换
        {
          normal: require("../assets/images/home.png"),
          selected: require("../assets/images/home1.png")
        },
        {
          normal: require("../assets/images/product.png"),
          selected: require("../assets/images/product1.png")
        },
        {
          normal: require("../assets/images/money.png"),
          selected: require("../assets/images/money1.png")
        },
        {
          normal: require("../assets/images/mine.png"),
          selected: require("../assets/images/mine1.png")
        }
      ]
    };
  },
  methods: {
    switchTo(path) {
      // console.log(this.$router)
      this.$router.replace(path);
    }
  }
};
</script>

<style lang="less" scoped>
.bottom-tab {
  width: 100%;
  background-attachment: fixed;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background-color: #fff;
  position: fixed;
  left: 0px;
  bottom: 0px;
  display: flex;
  z-index: 999;
  border: 5px solid #f6f6f7;
  border-bottom-style: none;
  border-left-style: none;
  border-right-style: none;
}

.tab-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //   font-size: 14px;
  color: #666;
}

img {
  width: 120%;
  margin-bottom: -15px;
}

.on {
  font-size: 10px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  color: #d1a568;
  padding-top: -10px;
}
span {
  margin-left: -5px;
}
</style>